<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-360.min.js}"></script>
    <script th:src="@{/js/jquery.ui.widget.js}"></script>
    <script th:src="@{/js/jquery.fileupload.js}"></script>
    <script th:src="@{/js/jquery.iframe-transport.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
</head>
<body>

<input id="fileupload" type="file" name="file" >
</body>

<script>
  $(function () {
    //上传商品图片
    $("#fileupload").fileupload({
      url: "/goods/uploadImg",
      dataType: 'json',
      formData: {},
      add: function(e, data) {

        if (!(window.File || window.FileReader|| window.FileList || window.Blob)) {
          alert('您的浏览器暂不支持图片预览');
          return;
        }

        //读取图片数据
        var f = data.originalFiles[0];
        var reader = new FileReader();
        reader.onload = function(e) {
          var datas = e.target.result;
          //获取图片真实宽度和高度
          var image = new Image();
          image.onload = function() {
            var width = image.width;//图片宽
            var height = image.height;//图片高
            var bfb = width/height*100;
            if (bfb>75||bfb<70) {
              alert("请上传宽300px、高415px的图片，当前图片宽度" + width + "px,高度" + height + "px");
              return;
            }
            data.submit();
          };
          image.src = datas;
        };
        reader.readAsDataURL(f);

      },
      done: function (e, data) {
        //上传完成
      },
    });
  })
</script>
</html>